<template>
  <div id="liveBigScreen" ref="capture">
    <div>
      <div class="bg1" v-if="!vipLevel">
        <img src="@/assets/three/bg1.jpg" alt />
        <img src="@/assets/three/black.png" alt />
      </div>
      <!-- <van-loading v-if="loading" type="spinner" /> -->
      <!-- <van-nav-bar title="达人详情" /> -->
      <div v-if="vipLevel">
        <div class="info">
          <div class="time">
            <p>数据更新时间</p>
            <p class="date">{{ time }}</p>
            <img src="@/assets/three/Refresh_03.png" @click="update" />
          </div>
          <div class="introduce">
            <div class="introduceLeft">
              <!-- <div class="bg"></div> -->
              <img class="img1" v-if="response01" :src="response01.logo" alt />
              <div class="liveBox" v-if="response01 && response01.status == 1">
                <p class="livingGifwl">
                  <span></span>
                  <span></span>
                  <span></span>
                  <span></span>
                </p>
                <span class="liveText">直播中</span>
                <img class="img2" src="@/assets/three/bg_02.png" alt />
              </div>
            </div>
            <div class="introduceRight">
              <img src alt />
              <p
                class="goodsTit"
              >{{ response01.room_title && response01.nickname }}</p>
              <div class="duration">
                <p>直播时长:</p>
                <p class="time_01" v-if="response01.length != 0">
                  {{
                  format_time(
                  (response01.end_timestamp - response01.begin_timestamp) *
                  1000
                  )
                  }}
                </p>
              </div>
              <div class="duration">
                <p>开始时间:</p>
                <p class="time_02">
                  {{
                  timestamp(
                  response01 && response01.begin_timestamp,
                  "Y-M-D h:m:s"
                  )
                  }}
                </p>
              </div>
              <div class="duration">
                <p>结束时间:</p>
                <p
                  class="time_03"
                  v-if="response01 && response01.status == 1"
                >--</p>
                <p class="time_03" v-if="response01 && response01.status == 2">
                  {{
                  timestamp(
                  response01 && response01.end_timestamp,
                  "Y-M-D h:m:s"
                  )
                  }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 销售额 -->
        <div class="sale">
          <p
            class="num_01"
            v-if="table_data011"
            v-num_running="{ num: table_data011 }"
          ></p>
          <p class="sale_01">销售额</p>
        </div>
        <div class="livegoods">
          <div v-if="length_01 != 0">
            <!-- 有数据 -->
            <p
              class="livegoodsTop"
              v-if="length_01"
              v-num_running="{ num: length_01 }"
            ></p>
            <p class="livegoodsButton" v-if="length_01">商品数</p>
          </div>
          <!-- 无数据 -->
          <div v-else>
            <p class="livegoodsTop">--</p>
            <p class="livegoodsButton">商品数</p>
          </div>
          <div>
            <p
              class="livegoodsTop"
              v-if="table_data012"
              v-num_running="{ num: table_data012 }"
            ></p>
            <p v-if="response02" class="livegoodsButton">商品销量</p>
          </div>

          <div>
            <p
              class="livegoodsTop"
              v-if="response02"
              v-num_running="{ num: response02.sound_count }"
            ></p>
            <p v-if="response02" class="livegoodsButton">音浪收入</p>
          </div>
          <div>
            <p
              class="livegoodsTop"
              v-if="response02"
              v-num_running="{ num: response02.see_max_count }"
            ></p>
            <p v-if="response02" class="livegoodsButton">观看人数峰值</p>
          </div>
          <div>
            <p
              class="livegoodsTop"
              v-if="response02"
              v-num_running="{ num: response02.see_his_count }"
            ></p>
            <p v-if="response02" class="livegoodsButton">累计观看人数</p>
          </div>
          <div>
            <p
              class="livegoodsTop"
              v-if="response01"
            >{{ response01.avg_look_time }}</p>
            <!-- <p class="livegoodsTop" v-if="response01">200h56'56"</p> -->
            <p v-if="response02" class="livegoodsButton">平均观看时长</p>
          </div>
        </div>
      </div>
      
      <!-- tab -->
      <van-tabs
        sticky
        v-model="active"
        background="#272727"
        title-active-color="#fff"
        title-inactive-color="#888888"
      >
        <van-tab title="商品列表">
          <goodslist
            @length="length"
            @table_data011="table_data01"
            @table_data012="table_data02"
            v-if="vipLevel"
            :update="update01"
            @upda="upda"
          />
          <div class="bg2" v-else>
            <img src="@/assets/three/bg2.jpg" alt />
            <img src="@/assets/three/black.png" alt />
          </div>
        </van-tab>
        <van-tab title="粉丝画像">
          <div v-if="vipLevel">
            <div class="part05">
              <p class="title">
                <span>观众来源</span>
              </p>
              <live_pie
                class="pie"
                :valueData="pie_data01"
                v-if="pie_data01.length != 0"
              />
            </div>
            <div class="part05">
              <p class="title">
                <span>性别分布</span>
              </p>
              <live_pie :valueData="pie_data02" v-if="pie_data02.length != 0" />
            </div>
            <div class="part05">
              <p class="title">
                <span>年龄分布</span>
              </p>
              <live_pie :valueData="pie_data03" v-if="pie_data03.length != 0" />
            </div>
          </div>
          <div v-else class="bg3">
            <img src="@/assets/three/bg3.jpg" alt />
            <img src="@/assets/three/black.png" alt />
          </div>
        </van-tab>

        <!-- 土豪送礼 -->
        <van-tab title="土豪送礼">
          <div v-if="vipLevel">
            <div class="part05">
              <p class="title">
                <span>土豪送礼TOP5</span>
              </p>
            </div>
            <div class="Gifttit">
              <p>排名</p>
              <p>土豪</p>
              <p>打赏音浪</p>
            </div>
            <ul class="ul02" v-if="gift_data.length != 0">
              <li
                v-for="(item, index) in gift_data"
                :key="'barrage_data01' + index"
              >
                <span class="Serialnumber">{{ index + 1 }}</span>
                <img class="logo" :src="item.logo" />
                <p class="dot">{{ item.nickname }}</p>
                <span class="color">{{ item.sound }}</span>
              </li>
            </ul>

            <div class="bottom_Collection" v-else>
              <img src="@/assets/three/wsj.png" alt />
              <!-- <p>目前没有可以查看的数据哟，请稍后再试~</p> -->
            </div>
          </div>
          <div v-else class="bg4">
            <img src="@/assets/three/bg4.jpg" alt />
            <img src="@/assets/three/black.png" alt />
          </div>
        </van-tab>
      </van-tabs>
      <!-- <div class="share" @click="generatorImage" v-if="vipLevel">
        <img @click="generatorImage" src="@/assets/three/share.png" alt="" />
      </div>-->
    </div>
    <!-- <div class="examples">
      <img src="@/assets/three/livebg.png" alt="" />
      <img src="@/assets//three/egText.png" alt="" />
    </div>-->
  </div>
</template>

<script>
// import VConsole from 'vconsole';

// let vConsole = new VConsole();
import live_pie from '@/component/live_pie';
import html2canvas from 'html2canvas';
import goodslist from './goodsList';
// 数字
export default {
  props: {},
  data() {
    return {
      loading: false,
      htmlUrl: '',
      active: '',
      response01: [],
      response02: [],
      permissions: '', // 权限
      pie_data01: [],
      time: '',
      time01: '',
      update01: false,
      length_01: '',
      pie_data02: [],
      pie_data03: [],
      gift_data: [],
      live: false,
      vipLevel: true,
      table_data011: null,
      table_data012: null
    };
  },
  computed: {},
  created() {},
  mounted() {
    //    this.get_data01();
    // this.get_data02();
    // this.time1();
    // this.get_data04();
    // this.update01 = true;
    //   this.time1();
    //   this.get_data01();
    //   this.get_data02();
    if (
      localStorage.getItem('vipLevel') == 1 ||
      localStorage.getItem('vipLevel') == 2
    ) {
      this.vipLevel = true;
      this.loop02 = setInterval(() => {
        this.table_data011 = null;
        this.table_data012 = null;
        this.update01 = true;
        this.time1();
        this.get_data01();
        this.get_data02();
      }, 60000);
      this.get_data01();
      this.get_data02();
      this.time1();
      this.get_data04();
    } else {
      this.vipLevel = false;
    }
  },
  watch: {
    response01(newValue) {
      if (newValue.status == 2) {
        clearInterval(this.loop02);
      }
    }
  },
  destroyed() {
    clearInterval(this.loop02);
  },
  methods: {
    get_data04() {
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/live/GetLiveFans',
        params: {
          room_id: this.$route.query.id
          // room_id: "6943753566079503141",
        }
      })
        .then(response => {
          if (response.data.code == 0) {
            this.gift_data = response.data.data.fans;
            this.pie_data02 = response.data.data.fans_attrbute.gender;
            this.pie_data03 = response.data.data.fans_attrbute.age;
            this.map_data = response.data.data.fans_attrbute.province;
            this.live = true;
          } else if (response.data.code == 1003) {
            this.live = false;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 商品数量
    length(length) {
      this.length_01 = 0;
      this.length_01 = length;
    },
    table_data01(table_data011) {
      this.table_data011 = table_data011;
      console.log(this.table_data011, 2222);
    },
    table_data02(table_data011) {
      this.table_data012 = table_data011;
    },
    // 调取接口
    get_data01() {
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/live/GetLive',
        params: {
          // room_id: "6943359626760555295",
          room_id: that.$route.query.id
        }
      })
        .then(response => {
          if (response.data.code == 0) {
            this.response01 = response.data.data;
            this.pie_data01 = response.data.data.fans_from;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 商品数接口
    get_data02() {
      this.response02 = null;
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/live/GetLiveAttribute',
        params: {
          // room_id: "6943359626760555295",
          room_id: that.$route.query.id
        }
      })
        .then(response => {
          if (response.data.code == 1003) {
            this.permissions = 0;
          }
          if (response.data.code == 0) {
            this.response02 = response.data.data;
            this.response02.amount = parseInt(this.response02.amount); // 销售额
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 点击更新
    update() {
      if (this.response01.status == 2) return;
      this.response01 = [];
      this.response02 = [];
      this.time1();
      this.update01 = true;
      this.get_data02();
      this.get_data01();
    },
    upda(i) {
      this.update01 = i;
    },
    // 时间
    time1() {
      var date = new Date();
      var year = date.getFullYear();
      var mon = date.getMonth() + 1;
      var day = date.getDate();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      var submitTime = '';
      submitTime += year + '-';
      if (mon >= 10) {
        submitTime += mon + '-';
      } else {
        submitTime += '0' + mon + '-';
      }
      if (day >= 10) {
        submitTime += day;
      } else {
        submitTime += '0' + day;
      }
      submitTime += ' ';
      if (h >= 10) {
        submitTime += h + ':';
      } else {
        submitTime += '0' + h + ':';
      }
      if (m >= 10) {
        submitTime += m + ':';
      } else {
        submitTime += '0' + m + ':';
      }
      if (s > 10) {
        submitTime += s;
      } else {
        submitTime += '0' + s;
      }
      this.time = submitTime;
    },
    // 页面元素转图片
    // 分享
    generatorImage() {
      this.loading = true;
      var that = this;
      // 时间
      let date;
      var shareContent;
      shareContent = this.$refs.capture; // 需要截图的包裹的（原生的）DOM 对象
      var width = shareContent.offsetWidth; // 获取dom 宽度
      var height = shareContent.offsetHeight; // 获取dom 高度
      var canvas = document.createElement('canvas'); // 创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; // 定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; // 定义canvas高度 *缩放
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      canvas.getContext('2d').scale(scale, scale); // 获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas // 自定义 canvas
        // logging: true, //日志开关
      };
      html2canvas(shareContent, opts).then(canvas => {
        let str;
        str = `《直播大屏》.png`;
        canvas.toBlob(
          function (blob) {
            const eleLink = document.createElement('a');
            eleLink.download = str;
            eleLink.style.display = 'none';
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          'image/png',
          1
        );
        this.loading = false;
      });
    }
  },
  components: {
    goodslist,
    live_pie
  }
};
</script>

<style scoped lang="less">
#liveBigScreen {
  background: #272727;
  overflow: hidden;
  min-height: 100vh;
  .info {
    height: 4.206667rem;
    background: url(../../../assets/three/bg_01.png);
    background-size: 100%;
    .time {
      display: flex;
      margin: 0 auto;
      margin-top: 0.4rem;
      width: 9.2rem;
      height: 0.88rem;
      line-height: 0.88rem;
      text-indent: 1.24rem;
      background-color: rgba(0, 0, 0, 0.12);
      border-radius: 0.133333rem;
      border: solid 1px rgba(229, 229, 229, 0.12);
      font-size: 0.346667rem;
      letter-spacing: 1px;
      color: #888888;
      .date {
        text-indent: 0.4rem;
        font-family: Dinpro-medium;
        color: #fff;
      }
      img {
        margin-top: 0.22rem;
        margin-left: 0.4rem;
        width: 0.386667rem;
        height: 0.386667rem;
        cursor: pointer;
      }
    }
    .introduce {
      display: flex;
      width: 9.2rem;
      height: 3.226667rem;
      padding-top: 0.4rem;
      margin: auto;
      .introduceLeft {
        width: 1.866667rem;
        height: 1.866667rem;
        position: relative;
        margin-right: 0.36rem;
        // border: 3px solid #fc4188;
        background: #272727;
        border-radius: 50%;

        .img1 {
          width: 1.653333rem;
          height: 1.653333rem;
          margin-left: 0.076667rem;
          margin-top: 0.085333rem;
          border-radius: 50%;
          border: 1px solid #272727;
        }
        .img2 {
          width: 1.866667rem;
          height: 0.533333rem;
          border-radius: 0.266667rem;
          position: absolute;
          left: 0;
          bottom: -0.2rem;
        }
        .liveBox {
          position: relative;
        }
        .livingGifwl {
          position: absolute;
          top: -0.08rem;
          left: 0.266667rem;
          z-index: 11;
        }
        .liveText {
          position: absolute;
          top: -0.2993333rem;
          left: 0.733333rem;
          font-size: 0.293333rem;
          font-weight: 600;
          letter-spacing: 1px;
          color: #ffffff;
          z-index: 11;
        }
        // line-height: 0.533333rem;
      }
      .introduceRight {
        height: 2.533333rem;
        position: relative;
        img {
          position: absolute;
        }
        .goodsTit {
          width: 6.666667rem;
          font-size: 0.4rem;
          text-indent: 0.533333rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: 600;
          letter-spacing: 1px;
          font-stretch: normal;
          color: #ffffff;
          margin-bottom: 0.116667rem;
          background: url(../../../assets/three/pop01.png) no-repeat 0
            0.066667rem;
          background-size: 0.426667rem 0.373333rem;
        }
        .Carrier {
          font-size: 0.373333rem;
          letter-spacing: 1px;
          color: #ffffff;
          margin-bottom: 0.1rem;
          font-stretch: normal;
          img {
            width: 0.373333rem;
            height: 0.373333rem;
            margin-top: 0.045rem;
          }
        }
        .duration {
          display: flex;
          font-size: 0.32rem;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #888888;
          margin-bottom: 0.10333rem;
          .time_01 {
            // font-family: Dinpro-medium;

            vertical-align: middle;
            margin-left: 0.2rem;
          }
          .time_02 {
            margin-top: 0.05667rem;
            margin-left: 0.2rem;
            font-family: Dinpro-medium;
          }
          .time_03 {
            margin-top: 0.05667rem;
            margin-left: 0.2rem;
          }
        }
      }
    }
  }
  // 销售额
  .sale {
    margin: auto;
    height: 1.746667rem;
    width: 9.2rem;
    background: url(../../..//assets/three/sale.png);
    background-size: 100%;
    margin-bottom: 0.186667rem;
    padding-top: 0.666667rem;
    text-align: center;
    .sale_01 {
      font-size: 0.346667rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #888888;
    }
    .num_01 {
      font-size: 0.666667rem;
      font-family: Dinpro-medium;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #fd7f2c;
    }
  }
  .livegoods {
    width: 9.2rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .livegoodsTop {
      margin-top: 0.533333rem;
      width: 100%;
      text-align: center;
      font-size: 0.453333rem;
      font-family: Dinpro-medium;
      color: #fd7f2c;
    }
    .livegoodsButton {
      font-size: 0.346667rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #888888;
      text-align: center;
    }
    div {
      width: 2.933333rem;
      height: 2rem;
      margin-bottom: 0.186667rem;
      &:nth-child(1) {
        background: url(../../../assets/three/bg_03.png) no-repeat;
        background-size: 100%;
      }
      &:nth-child(2) {
        background: url(../../../assets/three/bg_04.png) no-repeat;
        background-size: 100%;
      }
      &:nth-child(3) {
        background: url(../../../assets/three/bg_05.png) no-repeat;
        background-size: 100%;
      }
      &:nth-child(4) {
        background: url(../../../assets/three/bg_06.png) no-repeat;
        background-size: 100%;
      }
      &:nth-child(5) {
        background: url(../../../assets/three/bg_07.png) no-repeat;
        background-size: 100%;
      }
      &:nth-child(6) {
        background: url(../../../assets/three/bg_08.png) no-repeat;
        background-size: 100%;
      }
    }
  }
  .share {
    position: fixed;
    width: 1.066667rem;
    height: 1.066667rem;
    line-height: 1.066667rem;
    border-radius: 50%;
    right: 0.666667rem;
    bottom: 1.333333rem;
    img {
      width: 1.066667rem;
      height: 1.066667rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .part05 {
    width: 9.2rem;
    margin: auto;
    // > div {
    height: 100%;
    font-size: 0.4rem;
    font-weight: 600;
    color: #ffffff;
    .title {
      span {
        position: relative;
        padding-left: 0.4rem;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          top: 0.04rem;
          width: 0.08rem;
          height: 0.373333rem;
          background-color: #1779ff;
          border-radius: 0.04rem;
        }
      }
    }
    #live_pie {
      width: 9rem;
      height: 4.8rem;
      // }
    }
  }
  // 土豪送礼
  .Gifttit {
    width: 9.2rem;
    height: 1.013333rem;
    line-height: 1.013333rem;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 0.133333rem;
    border: solid 1px #414141;
    margin: auto;
    margin-bottom: 0.4rem;
    margin-top: 0.533333rem;
    font-size: 0.346667rem;
    color: #888888;
    display: flex;
    p {
      &:nth-child(1) {
        width: 1.733333rem;
        text-align: center;
      }
      &:nth-child(2) {
        width: 5.466667rem;
        text-indent: 0.4rem;
      }
      &:nth-child(3) {
        width: 1.48rem;
        // text-indent: 0.4rem;
      }
    }
  }
  .ul02 {
    width: 9.2rem;
    margin: auto;

    li {
      display: flex;
      height: 1.08rem;
      line-height: 1.08rem;
      font-size: 0.4rem;
      color: #888888;
      margin-bottom: 0.4rem;
      .Serialnumber {
        font-family: Dinpro-medium;
        width: 1.733333rem;
        display: inline-block;
        text-align: center;
      }
      .logo {
        width: 1.066667rem;
        height: 1.066667rem;
        border-radius: 50%;
        margin-left: 0.2rem;
        margin-right: 0.266667rem;
      }
      .dot {
        width: 2.826667rem;
        padding-right: 1.066667rem;
        display: inline-block;
        margin-right: 0.133333rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .color {
        color: #fd7f2c;
        font-family: Dinpro-medium;
        width: 1.48rem;
        text-align: center;
      }
    }
  }
  .examples {
    position: relative;
    width: 10rem;
    height: 100vh;
    img {
      width: 100%;
      height: 100%;
      &:nth-child(2) {
        width: 4.493333rem;
        height: 1.333333rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -6%);
      }
    }
  }
  .bg1 {
    width: 100%;
    position: relative;
    img {
      &:nth-child(1) {
        width: 100%;
      }
      &:nth-child(2) {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2.813333rem;
        transform: translate(-50%, 75%);
        opacity: 0.3;
      }
    }
  }
  .bg2 {
    width: 100%;
    img {
      &:nth-child(1) {
        width: 100%;
      }
      &:nth-child(2) {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2.813333rem;
        transform: translate(-50%, -50%);
        opacity: 0.3;
      }
    }
  }
  .bg3 {
    width: 100%;
    img {
      &:nth-child(1) {
        width: 100%;
      }
      &:nth-child(2) {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2.813333rem;
        transform: translate(-50%, -50%);
        opacity: 0.2;
      }
    }
  }
  .bg4 {
    width: 100%;
    height: 10.666667rem;
    img {
      &:nth-child(1) {
        width: 100%;
      }
      &:nth-child(2) {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2.813333rem;
        transform: translate(-50%, -50%);
        opacity: 0.2;
      }
    }
  }
  .bottom_Collection {
    width: 5.333333rem;
    height: 5.333333rem;
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 0.266667rem;
    img {
      width: 5.333333rem;
      height: 5.333333rem;
    }
    p {
      text-align: center;
      font-size: 0.373333rem;
      line-height: 0.4rem;

      color: #888888;
    }
  }
}
</style>
